<template>
  <div class="page-list-live">
    <PageList>
      <template #header>考勤管理</template>
      <template #table>
        <el-form ref="RefForm" :model="formData" :rules="formRules" label-width="240px" status-icon>
          <el-form-item label="选择考勤方式" prop="attendanceType">
            <el-select v-model="formData.attendanceType" style="width: 200px;" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="忽略记录时间(秒)" prop="ignoreMinutes">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.ignoreMinutes"></el-input>
              </div>
              <div class="fonts">说明：出隧道时判断进入隧道的时间，如果在设置的忽略范围内，则该次出的记录被忽略，并不记录考勤，默认30秒</div>
            </div>
          </el-form-item>
          <el-form-item label="计算考勤前多少时间的数据(分)" prop="befour">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.befour"></el-input>
              </div>
              <div class="fonts" style="color: #FFF">说明：</div>
            </div>
          </el-form-item>
          <el-form-item label="有效的考勤时间(分)" prop="validFrequencyMinutes">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.validFrequencyMinutes"></el-input>
              </div>
              <div class="fonts">说明：如果卡在这个时间内重复进出隧道，则不增加考勤记录，默认为5分（双模式为必填项，给出建议，为15分钟）</div>
            </div>
          </el-form-item>
          <el-form-item label="有效的停留时间(分)" prop="validStayMinutes">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.validStayMinutes"></el-input>
              </div>
              <div class="fonts">说明：如果卡在这个时间内没有发送数据到基站，则认为卡已离开，自动设置卡离开时间</div>
            </div>
          </el-form-item>
          <el-form-item label="有效的考勤记录条数" prop="validCounting">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.validCounting"></el-input>
              </div>
              <div class="fonts">说明：在考勤区域内外都要达到记录条数，才会触发考勤，默认为2条</div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { attendance } from '@/api/api'
  import { eleValidator } from "@/utils/tools"
  export default {
    mixins: [listMixin],
    data() {
      return {
        loading: false,
        options: [
          { label: '门禁', value: 1 },
          { label: '基站', value: 2 },
          { label: '门禁 + 基站', value: 3 },
        ],
        formData: {
          attendanceType: 2, // 考勤方式
          ignoreMinutes: '30', // 忽略记录时间
          befour: '20', // 计算考勤前多少时间
          validFrequencyMinutes: '5', // 有效进出时间频率间隔
          validStayMinutes: '10', // 有效时间
          validCounting: '2' // 有效考勤记录条数
        },
        formRules: {
          attendanceType: [
            { required: true, message: "请选择考勤方式", trigger: "change" }
          ],
          ignoreMinutes: [
            { required: true, message: "请输入忽略记录时间", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "忽略记录时间不能为空" },
                { rule: "isNumber", msg: "只能输入数字" },
              ]), trigger: "blur",
            }
          ],
          befour: [
            { required: true, message: "请输入计算考勤前时间", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "忽略计算考勤前时间不能为空" },
                { rule: "isNumber", msg: "只能输入数字" },
              ]), trigger: "blur",
            }
          ],
          validFrequencyMinutes: [
            { required: true, message: "请输入有效进出时间频率间隔", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "有效进出时间频率间隔不能为空" },
                { rule: "isNumber", msg: "只能输入数字" },
              ]), trigger: "blur",
            }
          ],
          validStayMinutes: [
            { required: true, message: "请输入有效时间", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "有效时间不能为空" },
                { rule: "isNumber", msg: "只能输入数字" },
              ]), trigger: "blur",
            }
          ],
          validCounting: [
            { required: true, message: "请输入有效考勤记录条数", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "有效考勤记录条数不能为空" },
                { rule: "isNumber", msg: "只能输入数字" },
              ]), trigger: "blur",
            }
          ],
        },
        id: null,
        // 是否有默认数据
        isDefault: false
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 保存
      async handleSubmit() {
        this.$refs['RefForm'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            let response = null
            try {
              if (this.isDefault) {
                response = await attendance('put', { id: this.id, value: this.formData })
              } else {
                response = await attendance('post', this.formData)
                this.getData()
              }
              this.$message.success('保存成功！')
            } catch (err) {
              console.log(err)
            }
            this.loading = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 查询
      async getData() {
        try {
          let response = await attendance('get', null)
          this.isDefault = true
          let data = response.data
          this.id = data.id
          this.formData = {
            attendanceType: data.attendanceType, // 考勤方式
            ignoreMinutes: data.ignoreMinutes, // 忽略记录时间
            befour: data.befour, // 计算考勤前多少时间
            validFrequencyMinutes: data.validFrequencyMinutes, // 有效进出时间频率间隔
            validStayMinutes: data.validStayMinutes, // 有效时间
            validCounting: data.validCounting // 有效考勤记录条数
          }
        } catch (err) {
          this.isDefault = false
          console.log(err)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tdDiv {
    display: flex;
    .inputDiv {
      width: 200px;
    }
    .fonts {
      color: #999;
      flex: 1;
      line-height: 20px;
      margin-left: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }
</style>
